<template>
  <BasicModal 
  width="680px"
  v-bind="$attrs"
  title="房间消费信息"
  ok-text="开始计费"
  @ok="onOk"
  @register="register"
  :loading="loading || detailLoading"
  >
    <Descriptions title="订购信息" >
      <DescriptionsItem label="预约人" :span="2">{{ orderData.orderName }}</DescriptionsItem>
      <DescriptionsItem label="联系电话">{{ orderData.phone }}</DescriptionsItem>
      <DescriptionsItem label="预约时间">{{ orderData.orderDate }}</DescriptionsItem>
    </Descriptions>
    <Descriptions title="消费信息" >
      <DescriptionsItem label="开始时间" :span="2">{{ orderData.orderDate }}</DescriptionsItem>
      <DescriptionsItem label="结束时间">{{ orderData.orderEndDate }}</DescriptionsItem>
      <DescriptionsItem label="购买时长" :span="2">{{ details?.purchaseDuration }}</DescriptionsItem>
      <DescriptionsItem label="是否超出">{{ details?.isOut ? '是' : '否' }}</DescriptionsItem>
      <DescriptionsItem label="计费开始时间" :span="2">{{ details?.startChargeDate }}</DescriptionsItem>
      <DescriptionsItem label="超出时长">{{ details?.outOfDate }}</DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>

<script lang="ts" setup >
import { ref, defineEmits } from 'vue';
import { useRequest } from '@vben/hooks'
import { Descriptions, DescriptionsItem } from 'ant-design-vue'
import { editOrdered, getOrderedDetail } from '@/api/ordered';
import { BasicModal, useModalInner } from '@/components/Modal'
import { formatToDateTime } from '@/utils/dateUtil';
import { OrderStatusEnum } from './settings'
import { IOrderedData } from '@/api/ordered/model';

const emits = defineEmits(['confirm']);

const { loading, runAsync } = useRequest(editOrdered, { manual: true })

const { loading: detailLoading, runAsync: getDetail, data: details } = useRequest(getOrderedDetail, { manual: true })

let orderData = ref<Partial<IOrderedData>>({})

const [register] = useModalInner((data) => {
  data.orderDate = formatToDateTime(data.orderDate)
  data.orderEndDate = formatToDateTime(data.orderEndDate)
  orderData.value = data;
  if (data.id) {
    getDetail(data.id);
  }
});

async function onOk() {
  const data = { ...orderData.value };
  data.status = OrderStatusEnum.Signed;
  await runAsync(data as IOrderedData);
  emits('confirm');
}

</script>